<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	.page { background: $brand-color-bg; min-height: 100vh; }
	.card { background: #FFFFFF; border-radius: $brand-radius-lg; box-shadow: $brand-shadow-card; }
	.title { color: $brand-color-heading; }
	.brand-header { height: 160rpx; background: linear-gradient(135deg, $brand-color-primary, mix($brand-color-primary, #fff, 40%)); border-bottom-left-radius: 24rpx; border-bottom-right-radius: 24rpx; }
	.btn-primary { background: linear-gradient(135deg, $brand-color-primary, mix($brand-color-primary, #fff, 35%)); color: #fff; border-radius: $brand-radius-md; box-shadow: 0 6rpx 16rpx rgba(107,91,149,0.35); border: 0; }
	.card-title { font-weight: 600; color: $brand-color-heading; margin-bottom: 12rpx; }
	.text-muted { color: $brand-color-muted; }
	/* 通用按钮与过渡 */
	.btn { display: flex; align-items: center; justify-content: center; height: 88rpx; border-radius: $brand-radius-md; transition: transform $brand-dur-fast $brand-ease-standard, box-shadow $brand-dur-fast $brand-ease-standard, background $brand-dur-fast $brand-ease-standard; padding: 0 24rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; font-weight: 600; letter-spacing: 0.5rpx; }
	.btn-block { width: 100%; }
	.btn-pill { border-radius: 9999rpx; }
	.btn-ghost { background: rgba($brand-color-primary, 0.06); color: $brand-color-primary; border: 1rpx solid rgba($brand-color-primary, 0.35); }
	.btn:hover { box-shadow: 0 8rpx 18rpx rgba(107,91,149,0.25); }
	.btn:active { transform: scale(0.985); box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.08); }
	.btn[disabled], .btn-primary[disabled] { opacity: 0.6; filter: grayscale(10%); }
	/* 安全区底部内边距 */
	.safe-bottom { padding-bottom: calc(12rpx + env(safe-area-inset-bottom)); padding-bottom: calc(12rpx + constant(safe-area-inset-bottom)); }
	/* 卡片悬浮动效（H5 有效） */
	.card-hover { transition: transform $brand-dur-fast $brand-ease-standard, box-shadow $brand-dur-fast $brand-ease-standard; }
	.card-hover:hover { box-shadow: $brand-shadow-layer; transform: translateY(-2rpx); }
	.fade-in-up { opacity: 0; transform: translateY(12rpx); animation: fadeInUp $brand-dur-med $brand-ease-standard forwards; }
	@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
</style>
